<template>
  <view class="content">
    <image v-for="(item,index) in bgIcon" :key="index" :style="{left:item.left+'rpx',top:item.top+'rpx'}" class="bg-icon" src="@/static/bg-icon.png"></image>
    <div v-show="false" class="author">作者QQ：2282017407@qq.com</div>
    <u-transition duration="600" :mode="transMode" :show="transShow">
      <div :style="'margin-top:'+levelMarginTop+'rpx'" class="level">
        <div class="langConvert ug">
          <div><u-subsection fontSize="15" inactiveColor="#777" activeColor="#000" bgColor="#ffffff00" @change="sectionChange" :list="langList" :current="langCurrent"></u-subsection></div>
        </div>
        <div class="title">
          <div v-if="_i18n_computed==='zh'">第 {{ number2str }} 关</div>
          <div v-if="_i18n_computed==='ug'" class="ug rtl">{{ number2str }} - ئۆتكەل</div>
        </div>
        <div></div>
      </div>
      <div class="box">
        <view v-for="(item0,index0) in allCards" :key="index0">
          <div @click="slectedCard(item,index,$event,index0)" v-for="(item,index) in item0" :key="index"
               :style="{left:item.left,top:item.top,zIndex:item.zIndex}" :class="item.isBottom?'disble':'show ' +transitionClass" class="card">
            <!-- #ifdef H5 -->
            <img :src="`./static/icon/${item.icon}.png`" :pid="item.pId" :alt="item.layer">
            <!-- #endif -->
            <!-- #ifdef MP -->
            <img :src="`/static/icon/${item.icon}.png`" :pid="item.pId" :alt="item.layer">
            <!-- #endif -->
            <div class="bot"></div>
          </div>
        </view>
      </div>
      <!--选择的卡片-->
    </u-transition>
    <!--选择的卡片-->
    <div class="btn-toup" v-if="transShow">
      <div class="up-list">
        <div @click="slectedCard(item,index,$event)" v-for="(item,index) in upCards" :key="index" class="card">
          <!-- #ifdef H5 -->
          <img :src="`./static/icon/${item.icon}.png`">
          <!-- #endif -->
          <!-- #ifdef MP -->
          <img :src="`/static/icon/${item.icon}.png`">
          <!-- #endif -->
        </div>
      </div>
      <div class="bottom">
        <div v-for="(item,index) in slectedCardList" :key="index" class="card">
          <!-- #ifdef H5 -->
          <img :src="`./static/icon/${item.icon}.png`" :alt="index">
          <!-- #endif -->
          <!-- #ifdef MP -->
          <img :src="`/static/icon/${item.icon}.png`" :alt="index">
          <!-- #endif -->
        </div>
      </div>
      <!--道具列表-->
      <div class="btn">
        <Btn :chance="toUpChance" :isDis="toUpIsDis" :text="$t('btn.left')" @click="toUp"></Btn>
        <Btn :chance="backHistoryChance" :isDis="backHistoryIsDis" :text="$t('btn.center')" @click="backHistory"></Btn>
        <Btn :chance="disruptDataChance" :isDis="disruptDataIsDis" :text="$t('btn.right')" @click="disruptData"></Btn>
      </div>
    </div>
    <!--作者-->
    <div v-show="false" class="author">作者QQ：2282017407@qq.com</div>
    <view><u-modal :showConfirmButton="false" :show="showModal" :title="modalTitle" :content='modalContent'></u-modal></view>
    <Alert @click="startPlayAd" @clickReStart="initData" :title="aTitle" :text="aText" :yesBtn="aYesBtn" :clickType="aClickType" :icon="aIcon" ref="alert"></Alert>
    <Toast ref="toast"></Toast>
  </view>
</template>

<script>
import Btn from "@/components/btn.vue"
import Alert from "@/components/alert.vue"
import Toast from "@/components/toast.vue"
//icon生成几个
const initIconNumber = 15;
const iconGroup = {
  level2:120,
  level3:150,
  default:270
};
const sortType = 1 ; //1：类似于(田)字   2:乱序
//打乱动画重复数
let animationHistory = 0;
//撤回了没有
let isBack = false;
//是否上去了没
let isToUp = false;
//是否复活了吗
let isFuHuo=false;
//背景音乐
let bgAudio="";
let clickMp3Obj="";
let selectedRemoveMp3Obj="";
export default {
  components: {
    Btn,Alert,Toast
  },
  data(){
    return{
      langList: ['中文', 'ئۇيغۇرچە'],
      langCurrent:this._i18n.locale == "zh" ? 0 : 1,
      //背景icon
      bgIcon:[
        {left:200,top:190},
        {left:400,top:300},
        {left:700,top:200},
        {left:100,top:200},
        {left:300,top:450},
        {left:120,top:600},
        {left:80,top:500},
        {left:140,top:600},
        {left:230,top:700},
        {left:720,top:980},
        {left:400,top:750},
        {left:500,top:950},
        {left:600,top:1300},
        {left:200,top:850},
        {left:650,top:800},
        {left:130,top:1000},
        {left:230,top:1200},
        {left:330,top:1400},
        {left:530,top:1600},
      ],
      //按钮组件
      toUpIsDis:false,
      backHistoryIsDis:false,
      disruptDataIsDis:false,
      toUpChance:"+",
      backHistoryChance:"+",
      disruptDataChance:"+",
      //弹出框组件
      aTitle:'',
      aText:'',
      aYesBtn:'',
      aIcon:'',
      aClickType:'',
      //页面动画
      transShow:false,
      transMode:'fade-down',
      //u-modal
      modalTitle:"提示",
      modalContent:"",
      showModal:false,
      //第几关
      level:1,
      //是否输了？
      isLost:false,
      //icon生成几个
      iconNumber:initIconNumber,
      //保存所有棋子
      allCards:[
        // {id:1,order:1,icon:'',left:'0',top:'0'},
        // {id:2,order:1,icon:'',left:'50px',top:'0'},
      ],
      //卡片定位数组
      cardPositionList:[],
      //选择的卡片
      slectedCardList:[],
      //记录选择的卡片，用于撤回
      historySlectedCard:[],
      //上去撤回三张
      upCards:[],
      //当前选择的卡片
      currentSlectedCard:{},
      //给卡片动画class
      transitionClass:'',
      //icon保存
      iconList:[
        {order:0,icon:1,bg:'#c08020'},
        {order:1,icon:2,bg:'#48a794'},
        {order:2,icon:3,bg:'#4869a7'},
        {order:3,icon:4,bg:'#d4624f'},
        {order:4,icon:5,bg:'#452b26'},
        {order:5,icon:6,bg:'#ffffff'},
        {order:6,icon:7,bg:'#be4eca'},
        {order:7,icon:8,bg:'#b7bc36'},
        {order:8,icon:9,bg:'#424c88'},
        {order:9,icon:10,bg:'#f70911'},
        {order:10,icon:11,bg:'#f70911'},
        {order:11,icon:12,bg:'#f70911'},
        {order:12,icon:13,bg:'#f70911'},
        {order:13,icon:14,bg:'#f70911'},
        {order:14,icon:15,bg:'#f70911'},
      ]
    }
  },
  mounted() {
    new Promise((resolve => {
      setTimeout(()=>{
        this.transShow = true;
        resolve()
      },500)
    })).then(()=>{
      this.initData();
      //背景，点击，销毁音乐
      this.bgMp3();
      this.bgAudioPlay()
      this.clickMp3Fn();
      this.selectedRemoveMp3Fn();
    })
  },
  computed:{
    number2str(){
      return this.level;
      return ['一','二','三','四','五','六','七','八','九','十'][this.level-1]
    },
    levelMarginTop(){
      // #ifdef MP-WEIXIN
      //获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点
      let custom = wx.getMenuButtonBoundingClientRect()
      //导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。
      this.customBar = custom.bottom + custom.top - uni.$u.sys().statusBarHeight
      // #endif
      return this.customBar
    },
    _i18n_computed(){
      return this._i18n.locale
    }
  },
  methods:{
    //切换语言的点击事件
    sectionChange(index){
      this._i18n.locale = index===1?'ug':'zh'
      this.langCurrent = index;
      uni.setStorageSync("lang",this._i18n.locale)
    },
    //播放广告
    async startPlayAd(){
      let res = await this.$refs.alert.adStart();
      if (res.isEnded){
        let timer=0
        if(res?.type){
          timer=2000;
        }
        //disruptData
        //toUp
        //backHistory
        setTimeout(()=>{
          uni.setStorage({
            key:this.aClickType,
            data: this.aClickType,
            success: ()=> {
              this.$refs.alert.close();
              setTimeout(()=>{
                this.bgAudioPlay()
                switch (this.aClickType){
                  case "disruptData":
                    this.disruptDataChance=1;
                    break;
                  case "toUp":
                    this.toUpChance=1;
                    break;
                  case "backHistory":
                    this.backHistoryChance=1;
                    break;
                  case "fuHuo":
                    this.fuhuoStart()
                    break;
                }
              },1000)
            }
          })
        },timer)
      }
      else {
        setTimeout(()=>{
          this.bgAudioPlay()
        },3000)
        this.$refs.toast.error(this.$t('adInComplete'),3000)
      }
    },
    //打乱未使用的卡片
    disruptData(){
      this.aClickType = "disruptData";
      if (!uni.getStorageSync('disruptData')){
        this.aIcon = "right";
        this.aTitle=this.$t('disruptData.aTitle');
        this.aText=this.$t('disruptData.aText');
        this.$refs.alert.open();
        return;
      }
      //禁止点击按钮
      this.disruptDataIsDis = true;
      animationHistory++;
      if (animationHistory > 2){
        this.transitionClass = '';
        return;
      }
      this.transitionClass = 'transitionClass';
      let random = 0;
      let layIndex = 0;
      let newPos = 0;
      this.fn2arrConvert1Arr(this.allCards).forEach(item=>{
        layIndex++;
        random = Math.floor(Math.random() * (this.cardPositionList.length-1));
        item['left'] = this.cardPositionList[random].left;
        item['top'] = this.cardPositionList[random].top;
        item['l'] = Number(this.cardPositionList[random].left.replace('rpx',''));
        item['t'] = Number(this.cardPositionList[random].top.replace('rpx',''));
        item['zIndex'] = layIndex;
        item['layer'] = layIndex;
        newPos++;
        if (newPos > (this.cardPositionList.length-1)){
          newPos=0;
        }
      })
      this.disableCardConverShowCard()
      this.fn1ArrConvert2Arr(this.fn2arrConvert1Arr(this.allCards))
      setTimeout(()=>{
        this.disruptData();
      },800)
    },
    //modal函数
    modalShow(content){
      this.showModal = true;
      this.modalContent=content;
      setTimeout(()=>{
        this.showModal = false;
      },1000)
    },
    //上去
    toUp(){
      if (isToUp) return;
      this.aClickType = "toUp";
      if (!uni.getStorageSync('toUp')){
        this.aIcon = "left";
        this.aTitle=this.$t('toUp.aTitle');
        this.aText=this.$t('toUp.aText');
        this.$refs.alert.open();
        return;
      }
      if (this.historySlectedCard.length < 1){
        return;
      }
      //禁止点击按钮
      this.toUpIsDis = true;
      for (let i in this.historySlectedCard){
        if (i < 3){
          this.upCards.push(this.historySlectedCard[i])
        }
      }
      this.upCards.sort((a,b)=>{
        return a.order - b.order;
      })
      let upCardId = [];
      for (let i in this.upCards){
        upCardId.push(this.upCards[i].id)
      }
      this.slectedCardList = this.slectedCardList.filter(item=>{
        return !upCardId.includes(item.id)
      })
      this.historySlectedCard = this.historySlectedCard.filter(item=>{
        return !upCardId.includes(item.id)
      })
      isToUp = true;
      this.isLost = false;
    },
    fuhuoStart(){
      if (!uni.getStorageSync('fuHuo')){
        return;
      }
      if (this.historySlectedCard.length < 1){
        return;
      }
      for (let i in this.historySlectedCard){
        if (i < 3){
          this.upCards.push(this.historySlectedCard[i])
        }
      }
      this.upCards.sort((a,b)=>{
        return a.order - b.order;
      })
      let upCardId = [];
      for (let i in this.upCards){
        upCardId.push(this.upCards[i].id)
      }
      this.slectedCardList = this.slectedCardList.filter(item=>{
        return !upCardId.includes(item.id)
      })
      this.historySlectedCard = this.historySlectedCard.filter(item=>{
        return !upCardId.includes(item.id)
      })
      isFuHuo=true;
      this.isLost = false;

    },
    //撤回最后一个
    backHistory(){
      if (isBack) return;
      this.aClickType = "backHistory";
      if (!uni.getStorageSync('backHistory')){
        this.aIcon = "center";
        this.aTitle=this.$t('backHistory.aTitle');
        this.aText=this.$t('backHistory.aText');
        this.$refs.alert.open()
        return;
      }
      //获取最后一个选中的
      let lastSlect = this.historySlectedCard[this.historySlectedCard.length-1];
      if (this.historySlectedCard.length < 1){
        return;
      }
      //禁止点击按钮
      this.backHistoryIsDis = true;
      //消除记录里面的
      this.historySlectedCard = this.historySlectedCard.filter(item=>{
        return item.id !== lastSlect.id;
      })
      //消除选择里面的
      this.slectedCardList = this.slectedCardList.filter(item=>{
        return item.id !== lastSlect.id;
      })
      //重新给allCards添加撤回的卡片
      if (this.allCards[lastSlect.pindex]){
        this.allCards[lastSlect.pindex].push(lastSlect);
      }else {
        this.allCards[lastSlect.pindex-2].push(lastSlect);
      }
      this.isCover("fn2arrConvert1Arr")
      isBack = true;
      this.isLost = false;
    },
    //返回上一关并且重新开始
    backLevel(){
      this.level = 1;
      this.iconNumber = initIconNumber;
      this.initData();
    },
    //点击卡片
    slectedCard(item,index,event,parentIndex){
      this.bgAudioPlay()
      //如果输了就不能选择
      if (this.isLost){
        if(isFuHuo){
          //复活一次
          this.aIcon = "center";
          this.aClickType = "fuHuo0";
          this.aTitle=this.$t('isFuHuo.aTitle');
          this.aText=this.$t('isFuHuo.aText');
          this.$refs.alert.open()
          return;
        }
        this.aIcon = "fuhuo";
        this.aClickType = "fuHuo";
        this.aTitle=this.$t('isLost.aTitle');
        this.aText=this.$t('isLost.aText');
        this.$refs.alert.open()
        return;
      }
      //检测元素是否被覆盖
      if (!item.isBottom){
        this.clickMp3()
        //
        this.disableCardConverShowCard()
        //当前选择的卡片
        this.currentSlectedCard=item;
        if (parentIndex >= 0){
          item.pindex=parentIndex;
          //删除allCards里面
          this.allCards[parentIndex] = this.allCards[parentIndex].filter(card=>{
            return card.id !== item.id;
          });
        }else {
          //删除upCards里面
          this.upCards = this.upCards.filter(card=>{
            return card.id !== item.id;
          });
        }
        //记录选择的卡片，用于撤回
        this.historySlectedCard.push(item);
        //然后选择
        this.slectedCardList.push(item);
        //选择的卡片排序
        this.slectedCardList.sort((a,b)=>{
          return a.order - b.order;
        })
        //选择的卡片中有3个同样的卡片的话，消除
        setTimeout(()=>{
          this.remove3Card()
        },200)
      }
    },
    //选择的卡片中有3个同样的卡片的话，消除
    remove3Card(){
      let currentNum=0;
      this.slectedCardList.forEach(item=>{
        if(item.icon===this.currentSlectedCard.icon){
          currentNum++;
        }
      })
      if (currentNum >= 3){
        this.selectedRemoveMp3()
        this.slectedCardList = this.slectedCardList.filter(item=>{
          return item.icon !== this.currentSlectedCard.icon;
        })
        //消除记录里面的
        this.historySlectedCard = this.historySlectedCard.filter(item=>{
          return item.icon !== this.currentSlectedCard.icon;
        })
      }
      //赢了
      let allCardsArr = this.fn2arrConvert1Arr(this.allCards);
      if(allCardsArr.length ===0 && this.upCards.length ===0){
        this.$refs.toast.success(this.$t('passATest'))
        this.transShow = false;
        this.level = this.level+1;
        setTimeout(()=>{
          this.transMode='slide-right';
          this.transShow = true;
          switch (this.level){
            case 2:this.iconNumber = iconGroup.level2 ; break;
            case 3:this.iconNumber = iconGroup.level3 ; break;
            default : this.iconNumber = iconGroup.default; break;
          }
          this.initData()
        },1000)
      }

      //如果选择超出了7个，就输了
      if(this.slectedCardList.length >= 7){
        if(isFuHuo){
          //复活一次
          this.aIcon = "center";
          this.aClickType = "fuHuo0";
          this.aTitle=this.$t('isFuHuo.aTitle');
          this.aText=this.$t('isFuHuo.aText');
          this.$refs.alert.open()
          return;
        }
        this.aClickType = "fuHuo";
        this.aIcon = "fuhuo";
        this.aTitle=this.$t('isLost.aTitle');
        this.aText=this.$t('isLost.aText');
        this.$refs.alert.open()
        this.isLost = true;
      }
    },
    //初始化一些变量
    initVar(){
      //清理session
      let currenLang = uni.getStorageSync("lang");
      uni.clearStorage();
      setTimeout(()=>{
        if (currenLang) uni.setStorageSync("lang",currenLang)
      },500)
      //弹出框关闭
      this.$refs.alert.close();
      this.aClickType=""; //弹出框点击的按钮类型
      //按钮组件
      this.toUpIsDis=false;
      this.backHistoryIsDis=false;
      this.disruptDataIsDis=false;
      this.toUpChance="+";
      this.backHistoryChance="+";
      this.disruptDataChance="+";
      //是否上去判断变量
      isToUp=false;
      //是否撤回判断变量
      isBack=false;
      //打乱的时候打乱几次
      animationHistory=0;
      //是否复活了么
      isFuHuo=false;
      //是否输
      this.isLost = false;
      //所有卡片
      this.allCards = [];
      //卡片定位数组
      this.cardPositionList = [];
      //选择的卡片
      this.slectedCardList = [];
      //当前选择的卡片
      this.currentSlectedCard= {};
      //上去数组清空
      this.upCards=[];
      //选择记录清空
      this.historySlectedCard=[];
      //初始化完毕
    },
    //生成数据
    initData(){
      this.initVar()
      //第一层
      let left=0;
      let top=0;
      for (let i= 0; i < 6;i++){//列
        for (let j= 0; j < 6;j++){//行
          this.cardPositionList.push({icon:1,left:left+'rpx',top:top+'rpx'})
          left+=100;
        }
        left=0;
        top+=100;
      }
      //第二层
      left=50;
      top=50;
      for (let i= 0; i < 5;i++){//列
        for (let j= 0; j < 5;j++){//行
          this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
          left+=100;
        }
        left=50;
        top+=100;
      }
      if (this.level > 1){
        //第三层
        left=100;
        top=100;
        for (let i= 0; i < 4;i++){//列
          for (let j= 0; j < 4;j++){//行
            this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
            left+=100;
          }
          left=100;
          top+=100;
        }
        //第四层
        left=150;
        top=150;
        for (let i= 0; i < 3;i++){//列
          for (let j= 0; j < 3;j++){//行
            this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
            left+=100;
          }
          left=150;
          top+=100;
        }
        //第五层
        left=200;
        top=200;
        for (let i= 0; i < 2;i++){//列
          for (let j= 0; j < 2;j++){//行
            this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
            left+=100;
          }
          left=200;
          top+=100;
        }
        //第六层
        left=250;
        top=250;
        for (let i= 0; i < 1;i++){//列
          for (let j= 0; j < 1;j++){//行
            this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
            left+=100;
          }
          left=250;
          top+=100;
        }
      }
      //生成随机图标
      this.generateRandomIcon();
    },
    //生成随机图标
    generateRandomIcon(){
      let random = 0;
      //赢的可能性随机
      let hardRand = Math.ceil(Math.random() * 10);  //1~10
      //3个一组
      let groupNumber = 3;
      for(let i=0; i < this.iconNumber; i++){
        //每三次循环，一次生成随机数
        if (i % groupNumber === 0){
          random = Math.floor(Math.random()*15);
        }
        this.allCards.push({
          id:i,
          icon:this.iconList[random].icon,
          order:this.iconList[random].order,
          bgColor:this.iconList[random].bg,
        })
        //实现allCards随机排序
        this.allCards.sort(()=>{
          return Math.random() > 0.5 ? -1 : 1;
        })

      }//end 随机排序
      //给卡片重新定位
      //随机位置
      random = 0;
      let layIndex=0;
      let newPos = 0;
      let layoutLeft=0;
      let layoutRight=0;
      let layoutRightBottom=0;
      let layoutLeftBottom=0;
      let indexPx = 6;
      this.allCards.forEach(item=>{
        random = Math.floor(Math.random() * (this.cardPositionList.length-1));
        if(sortType===2 || this.level===1){ // || this.level===1
          item['l'] = Number(this.cardPositionList[random].left.replace('rpx',''));
          item['t'] = Number(this.cardPositionList[random].top.replace('rpx',''));
          item['left'] = this.cardPositionList[random].left;
          item['top'] = this.cardPositionList[random].top;
        } else{
          if(layIndex >= 0){
            item['left'] = this.cardPositionList[newPos].left;
            item['top'] = this.cardPositionList[newPos].top;
            item['l'] = Number(this.cardPositionList[newPos].left.replace('rpx',''));
            item['t'] = Number(this.cardPositionList[newPos].top.replace('rpx',''));
          }
          if (layIndex > 90){
            item['left'] = layoutLeft * indexPx + 'rpx';
            item['top'] = 0 + 'rpx';
            item['l'] = layoutLeft * indexPx;
            item['t'] = layoutLeft * indexPx;
            layoutLeft++;
          }
          if (layIndex > 105){
            item['left'] =500 - (layoutRight * indexPx) + 'rpx';
            item['top'] =0 + 'rpx';
            item['l'] =500-(layoutRight * indexPx) * indexPx;
            item['t'] =layoutRight * indexPx;
            layoutRight++;
          }
          if (layIndex > 120){
            item['left'] = layoutLeftBottom * indexPx + 'rpx';
            item['top'] = 500 + 'rpx';
            item['l'] = layoutLeftBottom * indexPx;
            item['t'] = layoutLeftBottom * indexPx;
            layoutLeftBottom++;
          }
          if (layIndex > 135){
            item['left'] =500 - (layoutRightBottom * indexPx) + 'rpx';
            item['top'] = 500 + 'rpx';
            item['l'] =500-(layoutRightBottom * indexPx) * indexPx;
            item['t'] =layoutRight * indexPx;
            layoutRightBottom++;
          }
          if (layIndex > 150){
            item['left'] = this.cardPositionList[random].left;
            item['top'] = this.cardPositionList[random].top;
            item['l'] = Number(this.cardPositionList[random].left.replace('rpx',''));
            item['t'] = Number(this.cardPositionList[random].top.replace('rpx',''));
          }
        }
        layIndex++;
        item['layer'] = layIndex;
        item['zIndex'] = layIndex;
        newPos++;
        if (newPos > (this.cardPositionList.length-1)){
          newPos=0;
        }
      })
      //assitItem
      //检测卡片是否被覆盖
      this.isCover("oldData");
      this.fn1ArrConvert2Arr(this.allCards)
    },
    //一维数组转换二维数组
    fn1ArrConvert2Arr(allCards){
      let newArr = [];
      while(allCards.length > 0) {
        newArr.push(allCards.splice(0, 3));
      }
      this.allCards = newArr;
    },
    //二维数组转换一维数组
    fn2arrConvert1Arr(arr) {
      return [].concat(...arr);
      //return [].concat(...arr.map(item => Array.isArray(item) ? this.fn2arrConvert1Arr(item) : item))
    },
    disableCardConverShowCard(){
      new Promise((resolve)=>{
        let newArr = this.fn2arrConvert1Arr(this.allCards);
        newArr.forEach(item=>{
          item.isBottom = false;
        })
        resolve()
      }).then(()=>{
        //检测卡片是否被覆盖
        this.isCover("fn2arrConvert1Arr")
      })
    },
    /**
     * 专门用于 isCover()函数
     */
    coverCommon(item,item1){
      if(
          item1.layer > item.layer && item1.id !== item.id &&
          (
              (item1.l === item.l - 50 && item1.t === item.t - 50) ||
              (item1.l === item.l + 50 && item1.t === item.t + 50) ||
              (item1.l === item.l + 50 && item1.t === item.t - 50) ||
              (item1.l === item.l - 50 && item1.t === item.t + 50)
          )
      ){
        item.isBottom = true;
        item.pId = item1.id;
      }
    },
    /**
     * //检测卡片是否被覆盖
     * type---: oldData:原始数据，fn2arrConvert1Arr：表示二位数组转换一维数组
     */
    isCover(type){
      if(type=="oldData"){
        this.allCards.forEach(item=>{
          this.allCards.find(item1=>{
            this.coverCommon(item,item1)
          })
        })
      }else{
        //fn2arrConvert1Arr
        let newArr = this.fn2arrConvert1Arr(this.allCards);
        newArr.forEach(item=>{
          newArr.find(item1=>{
            this.coverCommon(item,item1)
          })
        })
      }
    },
    bgMp3(){
      ///static/mp3/bg.mp3
      bgAudio = uni.createInnerAudioContext();
      //https://res.wx.qq.com/voice/getvoice?mediaid=Mzg4OTAyMDk3OF8xMDAwMDY0Njk=
      //bgAudio.src = 'https://res.wx.qq.com/voice/getvoice?mediaid=Mzg4OTAyMDk3OF8xMDAwMDY0Njk=';
      bgAudio.src = 'https://res.wx.qq.com/voice/getvoice?mediaid=Mzg4OTAyMDk3OF8xMDAwMDY3NTA=';
      bgAudio.onPlay(() => {

      });
      bgAudio.onError((res) => {
        console.log(res.errMsg);
      });
    },
    clickMp3Fn(){
      ///static/mp3/bg.mp3
      clickMp3Obj = uni.createInnerAudioContext();
      clickMp3Obj.src = '/static/mp3/click.mp3';
      clickMp3Obj.onPlay(() => {});
      clickMp3Obj.onError((res) => {
        console.log(res.errMsg);
      });
    },
    selectedRemoveMp3Fn(){
      ///static/mp3/bg.mp3
      selectedRemoveMp3Obj = uni.createInnerAudioContext();
      selectedRemoveMp3Obj.src = '/static/mp3/ok.mp3';
      selectedRemoveMp3Obj.onPlay(() => {});
      selectedRemoveMp3Obj.onError((res) => {
        console.log(res.errMsg);
      });
    },
    clickMp3(){
      // #ifdef MP
      uni.vibrateShort();
      uni.vibrateShort();
      // #endif
      clickMp3Obj.volume = 1;
      clickMp3Obj.play();
    },
    selectedRemoveMp3(){
      selectedRemoveMp3Obj.volume = 1;
      selectedRemoveMp3Obj.play();
    },
    bgAudioPlay(){
      bgAudio.loop = true;
      bgAudio.volume = 0.1;
      bgAudio.play()
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  background-color: #c3ff8b;
  position: relative;
  height: 100vh;
  overflow: hidden;
  .bg-icon{
    z-index: 0;
    position: absolute;
    left: 100rpx;
    top: 150rpx;
    width: 80rpx!important;
    height: 44rpx!important;
    animation:bg-icon .45s infinite;
  }
  .langConvert{
    width:200rpx;
    display: inline-block;
    padding-left: 20rpx;
    margin-top: 15rpx;
    height: 60rpx;
    div{
      background-color: #24a4ff4d;
      /* #ifdef MP */
      border-radius: 40rpx;
      /* #endif */
      margin-top: -10rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
}
@keyframes bg-icon {
  0%{transform:scaleY(1.4)}
  to{transform:scale(1)}
}
.box{
  width:600rpx;
  height:600rpx;
  margin: 100rpx auto 0;
  position: relative;
  .card{
    position: absolute;
  }
}
.btn-toup{
  position: absolute;
  bottom: 40rpx;
  width: 100%;
  .up-list{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 15rpx;
  }
}
.bottom{
  height: 120rpx;
  width: 700rpx;
  background-color: rgb(150,90,27);
  margin: auto;
  border-radius: 12rpx;
  padding: 0 10rpx;
  div{
    margin-top: 10rpx;
    display: inline-block;
  }
}
.transitionClass{
  transition: all 1s ease-out !important;
}
.card{
  width: 96rpx;
  height: 96rpx;
  border: 1px solid green;
  line-height: 100rpx;
  text-align: center;
  background-color: #f3ffd1;
  color: #fff;
  font-size: 72rpx;
  border-radius: 8rpx;
  box-shadow: 0 0 20rpx 0 #545454;
  img{
    width: 65rpx;
    height: 65rpx;
    margin-bottom: 6rpx;
  }
  .bot{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10rpx;
    background-color: #90ee90;
    border-bottom-left-radius: 6rpx;
    border-bottom-right-radius: 6rpx;
    border-bottom: 4rpx solid green;
  }
}
.btn{
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}
.level{
  height: 100rpx;
  line-height:100rpx;
  text-align: center;
  font-size: 60rpx;
  font-weight: bold;
  display: grid;
  grid-template-columns: 250rpx 250rpx 250rpx;
}

.author{
  width: 100%;
  text-align: center;
  font-size: 28rpx;
}
.version{
  margin-top: 100rpx;
  color: #999;
}
.btn-style{
  display: inline-block;
  margin: 0 10rpx;
}
.disble{
  background-color: #949b7a;
  opacity: .9;
  z-index:0;
}
.show{
  z-index:1;
  transition: background-color .4s ease-out;
}
.assist{
  position: absolute;
  display: flex;
  justify-content: space-between;
}
</style>
